import EditPatient from '@components/EditPatient';
<template>
  <div class="i-table-no-border">
    <Table highlight-row
      ref="table"
      :columns="columns"
      :data="dataWithPage"
      :loading="loading"
      size="small"
    >
      <template slot-scope="{ row }" slot="info">
        <a @click="handleDetailPatient(row)">{{ row.basic }}</a>
      </template>
      <template slot-scope="{ row }" slot="state">
        <Tag v-if="row.state === 0" color="blue">失效</Tag>
        <Tag v-if="row.state === 1" color="volcano">跟进中</Tag>
        <Tag v-if="row.state === 2" color="cyan">预约</Tag>
        <Tag v-if="row.state === 3" color="green">到诊</Tag>
        <Tag v-if="row.state === 4" color="orange">已到老患者</Tag>
      </template>
      <template slot-scope="{ row }" slot="label">
        <Tag v-if="row.label === 0">在乎费用</Tag>
        <Tag v-if="row.label === 1">专家</Tag>
        <Tag v-if="row.label === 2">敏感</Tag>
        <Tag v-if="row.label === 3">远程</Tag>
      </template>
      <template slot-scope="{ row }" slot="channel">
        <Badge v-if="row.channel === 0" status="success" text="微信" />
        <Badge v-if="row.channel === 1" status="processing" text="抖音" />
        <Badge v-if="row.channel === 2" status="error" text="市场转诊" />
        <Badge v-if="row.channel === 3" status="warning" text="自然到诊" />
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <a @click="handleOpenDrawer">编辑</a>
        <!-- <Divider type="vertical" />
                <a @click="handleReturnVisit"> 回访 </a>-->
        <!-- <Divider type="vertical" />
                <a @click="handleVisit">到诊</a>-->
      </template>
    </Table>
    <div class="ivu-mt iuv-text-center" slot="footer">
      <Page
        :total="limitData.length"
        :current.sync="current"
        show-elevator
        show-sizer
        show-total
      ></Page>
    </div>
    <Modal title="到诊确认" v-model="visitModal" @on-ok="ok">
      <Form :label-width="100">
        <FormItem label="患者姓名：">刘志强</FormItem>
        <FormItem label="手机号：">13522565565</FormItem>
        <FormItem label="选择诊室" required>
          <Select v-width="150">
            <Option value="一诊">一诊</Option>
            <Option value="二诊">二诊</Option>
            <Option value="三诊">三诊</Option>
            <Option value="四诊">四诊</Option>
          </Select>
        </FormItem>
        <FormItem label="诊疗号" required>
          <Input v-width="150" placeholder="请输入患者诊疗号" />
        </FormItem>
        <FormItem label="到诊时间" required>
          <DatePicker :editable="false" type="datetime" v-width="150"></DatePicker>
        </FormItem>
        <FormItem label="真实姓名" required>
          <Input v-width="150" placeholder="请输入真实姓名" />
        </FormItem>
      </Form>
    </Modal>
    <patient-detail ref="patientDetail" @cancelDrawer="askData" />
    <edit-patient ref="editPatient" v-if="!loading" />
    <return-visit ref="returnVisit" />
  </div>
</template>
<script>
import random from "@/libs/random_str";
import patientDetail from "@/components/patientDetail";
import editPatient from "@/components/editPatient";
import returnVisit from "@/components/returnVisit";
export default {
  components: { patientDetail, editPatient, returnVisit },
  data() {
    return {
      loading: false,
      modal: false,
      visitModal: false,
      list: [],
      current: 1,
      size: 10,
      showCreate: false,
      creating: true,
      formData: {
        personnel: [],
        Occupation: "",
        Effect: "",
        risk: "",
        Diagnosis: "",
      },
      columns: [
        {
          title: "基本信息",
          key: "basic",
          slot: "info",
          minWidth: 135,
          fixed: "left",
        },
        // { title: '微信号', key: 'wx', minWidth: 108 },
        { title: "患者状态", key: "state", slot: "state", minWidth: 100 },
        { title: "归属人", key: "belonger", minWidth: 80 },
        {
          title: "预到时间",
          key: "preArrival",
          sortable: "custom",
          minWidth: 108,
        },
        {
          title: "预约时间",
          key: "actionTime",
          sortable: "custom",
          minWidth: 108,
        },
        {
          title: "回访次数",
          key: "numberVisits",
          sortable: "custom",
          minWidth: 108,
        },
        { title: "患者标签", key: "label", slot: "label", minWidth: 138 },
        { title: "城市", key: "city", minWidth: 100 },
        { title: "病种", key: "disease", minWidth: 100 },
        { title: "来源", minWidth: 120, slot: "channel" },
        { title: "创建时间", key: "foundTime", minWidth: 135 },
        { title: "备注", minWidth: 150, key: "remarks" },
        { title: "操作", minWidth: 90, slot: "action", fixed: "right" },
      ],
    };
  },
  computed: {
    limitData() {
      let data = [...this.list];
      return data;
    },
    dataWithPage() {
      const data = this.limitData;
      const start = this.current * this.size - this.size;
      const end = start + this.size;
      return [...data].slice(start, end);
    },
  },
  methods: {
    mockOneData() {
      const item = {};
      item.basic =
        "刘志强 男" + " " + Math.floor(Math.random() * 60 + 15) + "岁";
      item.wx = random(8);
      item.state = Math.floor(Math.random() * 5);
      item.belonger = "高玲";
      item.preArrival = "2020-05-21";
      item.actionTime = "2020-05-18";
      item.channel = Math.floor(Math.random() * 4);
      item.state = Math.floor(Math.random() * 4);
      item.numberVisits = Math.floor(Math.random() * 100);
      item.disease = "白癜风";
      item.dialogue = Math.floor(Math.random() * 3);
      item.city = "上海";
      item.label = Math.floor(Math.random() * 4);
      item.foundTime = "2020-05-01 16:03";
      item.remarks = "备注内容";
      item.operation = Math.floor(Math.random() * 2);
      return item;
    },
    getData() {
      this.current = 1;
      this.loading = true;
      setTimeout(() => {
        let data = [];
        for (let i = 0; i < 100; i++) {
          data.push(this.mockOneData());
        }
        this.list = data;
        this.loading = false;
      }, 1000);
    },
    handleOpenDrawer() {
      this.$refs.editPatient.handleEdit();
    },
    handleDetailPatient(row) {
      this.$refs.patientDetail.handleOpen();
    },
    handleVisit() {
      this.visitModal = true;
    },
    ok() {
      this.$Message.success("操作成功");
    },
    askData() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
